<script setup lang="ts">
import type { AreaProject } from '@/types/micro-scene';
import { DeleteOutlined, EditOutlined, EyeOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import ProjectEditModal from '@/views/MicroScene/home/components/Modal/ProjectEditModal.vue';
import { deleteProjectApi, updateProjectCoverApi } from '@/api/MicroScene/MicroSceneApi';
import ProjectCoverEditModal from '@/views/MicroScene/home/components/Modal/ProjectCoverEditModal.vue';

const props = defineProps<{
  project: AreaProject;
}>();

const emit = defineEmits<{
  (e: 'refresh'): void;
}>();

const editModalOpen = ref<boolean>(false);
const deleteModalOpen = ref<boolean>(false);
const coverEditModalOpen = ref<boolean>(false);

const handleEditSuccess = () => {
  emit('refresh');
};

const handleDelete = async () => {
  try {
    await deleteProjectApi(props.project.projectId);
    message.success('删除成功');
    emit('refresh');
  }
  catch (error: any) {
    message.error(error.message || '删除失败');
  }
  deleteModalOpen.value = false;
};

const handleNavigate = () => {
  if (props.project.targetUrl) {
    let url = props.project.targetUrl;
    if (!url.startsWith('http://') && !url.startsWith('https://'))
      url = `https://${url}`;

    window.open(url, '_blank');
  }
};
</script>

<template>
  <a-layout style="display: flex; flex-direction: column; border-radius: 0.5rem; background-color: white; padding: 0.5rem;" class="transition-transform duration-200 hover:shadow-lg hover:scale-95">
    <div style="display: flex; flex-direction: row; gap: 0.5rem;">
      <div style="width: 30%;">
        <img
          :src="project.coverUrl"
          alt="项目封面"
          style="width: 100%; height: 100%; object-fit: cover; border-radius: 0.5rem; cursor: pointer;"
          @click="coverEditModalOpen = true"
        >
      </div>

      <div style="width: 70%; display: flex; flex-direction: column;">
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <span style="font-size: 1rem; font-weight: bold; display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 1; overflow: hidden; line-height: 1.5rem;">{{ project.projectTitle }}</span>
          <div style="display: flex; gap: 4px;">
            <a-button type="link" style="padding: 0" @click="editModalOpen = true">
              <EditOutlined />
            </a-button>
            <a-button type="link" danger style="padding: 0" @click="deleteModalOpen = true">
              <DeleteOutlined />
            </a-button>
          </div>
        </div>

        <a-flex wrap="wrap" style="height: 1.5rem; overflow-y: hidden; gap: 0.5rem; margin-top: 0.5rem;">
          <a-tag v-for="tag in project.tags" :key="tag" style="margin-right: 0rem; border: none; background-color: #f0f0f0; color: #666; height: fit-content;">
            {{ tag }}
          </a-tag>
        </a-flex>

        <span style="font-size: 0.8rem; margin-top: 0.5rem; display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 3; overflow: hidden; height: 3.5rem; line-height: 1.5;">{{ project.introduction }}</span>

        <div v-if="project.tags.length === 0" style="width: 100%; height: 1.5rem; background-color: transparent;" />

        <div class="flex flex-row justify-end gap-2 mt-2">
          <a-button
            type="primary"
            icon-placement="right"
            style="font-size: 14px;border: none;"
            @click="handleNavigate"
          >
            查看详情
            <EyeOutlined />
          </a-button>
        </div>
      </div>
    </div>
  </a-layout>

  <ProjectEditModal
    :open="editModalOpen"
    :project="project"
    @change-open-state="editModalOpen = $event"
    @success="handleEditSuccess"
  />

  <ProjectCoverEditModal
    :open="coverEditModalOpen"
    :current-cover-url="project.coverUrl"
    :project-id="Number(project.projectId)"
    :area-id="Number(project.areaId)"
    @change-open-state="coverEditModalOpen = $event"
    @success="handleEditSuccess"
  />

  <a-modal
    v-model:open="deleteModalOpen"
    title="确认删除"
    ok-text="确认"
    cancel-text="取消"
    @ok="handleDelete"
  >
    <p>确定要删除该项目吗？此操作不可恢复。</p>
  </a-modal>
</template>

<style scoped>
</style>
